<template>
  <div class="medical-service">
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm">
            <el-row :gutter="12">
              <el-col :md="24" :lg="12" :xl="6">
                <el-form-item label="医疗服务项目类型" label-width="120px" prop="projectType">
                  <el-select v-model="searchForm.projectType" clearable placeholder="请选择" style="width:100%;" @change="selectProjectType">
                    <el-option
                      v-for="item in projectTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="6">
                <el-form-item label="医疗服务项目" label-width="120px" prop="project">
                  <el-select
                    v-model="searchForm.project"
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width:100%;"
                    :filter-method="dataFilter"
                    @visible-change="handleMedicalProject"
                  >
                    <el-option
                      v-for="item in projectOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="6">
                <el-form-item label="参保人员类别" label-width="120px" prop="insuredType">
                  <el-select v-model="searchForm.insuredType" clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in insuredTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="6">
                <el-form-item label="基金来源" label-width="120px" prop="fundResources">
                  <el-select v-model="searchForm.fundResources" clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in fundResourcesOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="16" :xl="16">
                <el-form-item label="费用时间" label-width="120px" prop="priceTime">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="8" align="right">
                <el-form-item>
                  <el-button size="small" @click="resetCondition">重置</el-button>
                  <el-button type="primary" size="small" @click="search">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer">
      <div v-if="totalPie.length > 0" class="box">
        <div class="box-header">
          <span class="box-title">金额占比情况图</span>
        </div>
        <div class="box-body">
          <el-row>
            <h2>
              医疗服务项目金额：{{ medicalValue }} 万元 医疗服务项目数量：{{
                projectCount
              }}次
            </h2>
          </el-row>
          <el-row :gunter="12">
            <el-col :md="24" :lg="12" :xl="12">
              <PieChart
                width="100%"
                title="医疗服务项目金额与总费用占比情况"
                chart-id="totalRate"
                :pie-data="totalPie"
                height="300px"
                val-title="费用(万元)"
                cate-title="医疗服务项目"
              />
            </el-col>
            <el-col :md="24" :lg="12" :xl="12">
              <PieChart
                width="100%"
                title="同类型医疗服务项目金额占比情况"
                chart-id="typeRate"
                :pie-data="typePie"
                height="300px"
                val-title="费用(万元)"
                cate-title="医疗服务项目"
              />
            </el-col>
          </el-row>
          <el-row>
            <h2 style="margin-top: 66px">医疗服务项目医院级别占比情况</h2>
          </el-row>
          <el-row>
            <LevelTable :table-data="tableData" />
          </el-row>
        </div>
      </div>
    </section>
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">医疗服务项目医院比对分析</span>
        </div>
        <div class="box-body">
          <el-row :gutter="12">
            <el-col :md="24" :lg="20" :xl="20">
              <el-form>
                <el-form-item label="对比医疗机构" label-width="120px">
                  <el-select
                    v-model="institution"
                    multiple
                    :multiple-limit="10"
                    placeholder="请选择"
                    style="width:100%;"
                  >
                    <el-option
                      v-for="item in contrastInstitution"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :md="24" :lg="4" :xl="4" align="right">
              <el-button size="small" @click="clearContrast">重置</el-button>
              <el-button type="primary" size="small" @click="contrast">对比</el-button>
            </el-col>
            <el-col v-if="countLineData.length > 0" :md="24" :lg="12" :xl="12">
              <BarChart
                :data-bar="countLineData"
                chart-id="countContrast"
                title="医疗服务项目用量比对"
                title-x="医院"
                title-y="项目用量"
                y-name="个"
              />
            </el-col>
            <el-col v-if="priceLineData.length > 0" :md="24" :lg="12" :xl="12">
              <BarChart
                :data-bar="priceLineData"
                chart-id="costContrast"
                title="医疗服务项目费用金额比对"
                title-x="医院"
                title-y="金额"
                y-name="元"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import PriceTime from '../components/PriceTime'
import PieChart from './components/PieChart'
import LevelTable from './components/LevelTable'
import BarChart from './components/BarChart'
import { getHospitalContrast, getProjectCost, getMedicalServiceProject } from '@/api/assist-decision/medicalServiceAnalyze'
import { getContrastMedicalInstitution } from '@/api/assist-decision/common'
import { mapGetters } from 'vuex'
export default {
  mixin: [],
  components: {
    PriceTime,
    PieChart,
    LevelTable,
    BarChart
  },
  props: {},
  data() {
    return {
      searchForm: {
        projectType: '',
        project: '',
        beginDate: null,
        endDate: null, // 费用时间
        fundResources: '',
        insuredType: ''
      },
      institution: [],
      contrastInstitution: [],
      projectOptions: [],
      countLineData: [],
      priceLineData: [],
      tableData: [],
      medicalValue: 0,
      projectCount: 0,
      totalPie: [],
      typePie: [],
      medicalProjectOptions: []
    }
  },
  computed: {
    ...mapGetters(['selectMaps']),
    projectTypeOptions() {
      const result = this.selectMaps && this.selectMaps.MED_ITEM_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    fundResourcesOptions() {
      const result = this.selectMaps && this.selectMaps.FUND_SOUC || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    insuredTypeOptions() {
      const result = this.selectMaps && this.selectMaps.LV3_PSN_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    contrastOptions() {
      const result = this.selectMaps && this.selectMaps.LV3_PSN_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    }
  },
  watch: {},
  created() {
    this.getContrastMedicalInstitution()
  },
  mounted() {},
  methods: {
    getHospitalContrast() {
      const params = {
        beginDate: this.searchForm.beginDate, // 开始日期
        endDate: this.searchForm.endDate, // 结束日期
        medItemType: this.searchForm.projectType, // 医疗服务项目类型
        medItemCode: this.searchForm.project, // 医疗服务项目
        fundSouc: this.searchForm.insuredType,			// 参保人员类别
        lv3PsnType: this.searchForm.fundResources,		// 基金来源
        hospCode: this.institution.join(',') // 所选的对比医疗机构
      }
      getHospitalContrast(params).then(res => {
        const result = res.data
        if (result) {
          const newCountLineData = []
          const newPriceLineData = []
          result.numAverComList && result.numAverComList.forEach(item => {
            newCountLineData.push({
              name: item.hospName,
              value: item.itemNum
            })
            newPriceLineData.push({
              name: item.hospName,
              value: item.itemCost
            })
          })
          this.priceLineData = newPriceLineData
          this.countLineData = newCountLineData
        }
      })
    },
    getProjectCost() {
      const params = {
        beginDate: this.searchForm.beginDate, // 开始日期
        endDate: this.searchForm.endDate, // 结束日期
        medItemType: this.searchForm.projectType, // 医疗服务项目类型
        medItemCode: '0004', // 医疗服务项目
        fundSouc: this.searchForm.insuredType,			// 参保人员类别
        lv3PsnType: this.searchForm.fundResources		// 基金来源
      }
      getProjectCost(params).then(res => {
        const result = res.data
        if (result) {
          this.medicalValue = result.medItemSumfee
          this.projectCount = result.medItemCnt
          this.totalPie = [
            { value: result.medItemSumfee, name: result.medItemName },
            { value: result.otherFee, name: '其他项目' }
          ]
          this.typePie = [
            { value: result.medItemSumfee, name: result.medItemName },
            { value: result.sameTypeFee, name: '其他同类型项目' }
          ]
          const newList = []
          const hospitalLevel = ['一级医院', '二级医院', '三级医院']
          result.comItemList && result.comItemList.forEach(item => {
            newList.push({
              level: hospitalLevel[parseInt(item.medinsLv) - 1],
              value: item.dmHosItemCost + '万元',
              count: item.dmHosItemNum,
              rate: item.totalCompare + '%'
            })
          })
          this.tableData = newList
        }
      })
    },
    getContrastMedicalInstitution() {
      getContrastMedicalInstitution().then(res => {
        const result = res.data
        if (result) {
          const institutionList = []
          result.forEach(item => {
            institutionList.push({ label: item.AKB021, value: item.AKB020 })
          })
          this.contrastInstitution = institutionList
        }
      })
    },
    getMedicalServiceProject() {
      if (!this.searchForm.projectType) {
        return
      }
      getMedicalServiceProject(this.searchForm.projectType).then(res => {
        const result = res.data
        if (result) {
          const newOptions = []
          result.forEach(item => {
            newOptions.push({ label: item.AKE002, value: item.AKE001 })
          })
          this.medicalProjectOptions = newOptions
        }
      })
    },
    resetCondition() {
      this.$refs.priceTime.reset() // 子组件重置
      this.$refs.searchForm.resetFields()
    },
    // 查询
    search() {
      this.getProjectCost()
    },
    // 对比
    contrast() {
      this.getHospitalContrast()
    },
    clearContrast() {
      this.institution = []
    },
    priceTimeChange(val) {
      this.searchForm.beginDate = val[0] || null
      this.searchForm.endDate = val[1] || null
    },
    selectProjectType() {
      this.getMedicalServiceProject()
    },
    dataFilter(val) {
      if (this.searchForm.projectType && this.medicalProjectOptions.length > 0 && val.trim()) {
        this.projectOptions = this.medicalProjectOptions.filter(item => item.label.indexOf(val) > -1)
      } else if (!this.searchForm.project) {
        this.projectOptions = []
      }
    },
    handleMedicalProject() {
      if (!this.searchForm.project) {
        this.projectOptions = []
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
